<template>
	<view class="hotel-room-list">
		<RoomHead :iscollect="iscollect" :latitude="hotelDetail.latitude" :longitude="hotelDetail.longitude"
			:address="hotelDetail.address" :name="hotelDetail.name" @goToHotelDetailsPage="goToHotelDetailsPage"
			@isCollect="isCollect"></RoomHead>
		<view class="hotel-room-list-one">
			敬请知悉，酒店所有房间都是非吸烟房间
		</view>
		<RoomData :roomTotal="roomTotal" :startMMDD="startMMDD" :endMMDD="endMMDD" :roomNumList="roomNumList"
			:totalNum="totalNum" :roomList="roomList" @showRoomShapePop="showRoomShapePop" @showCalendar="showCalendar"
			@roomPopup="roomPopup" />

		<!-- 房间数 -->
		<uni-popup ref="roomNumPopup" type="dialog" borderRadius="30rpx 30rpx 30rpx 30rpx" backgroundColor="#ffffff"
			@change="chgPopup">
			<view class="boxSize_bb roomAndPeople" style="background-color: #ffffff; color: black;">
				<view class="rp_item flex_jcsb" v-for="(item, index) in roomNumList" :key="index">
					<view class="rp_item_left">
						{{ item.name }}
					</view>
					<view class="rp_item_right flex">
						<image src="/static/images/ShoppingCart/decrease.png" mode=""
							style="width: 40rpx;height: 40rpx;" class="rpir_one" @tap="minusNum(index, item)" />
						<text class="rpir_two">{{ item.num }}</text>
						<image src="/static/images/ShoppingCart/increase.png" mode=""
							style="width: 40rpx;height: 40rpx;" class="rpir_three" @tap="addNum(index)" />
					</view>
				</view>
				<view class="button" style="height: 80rpx; margin-top: 60rpx; border-radius: 40rpx;"
					@tap="roomNumClose">
					确定
				</view>
			</view>
		</uni-popup>

		<!-- 日历弹窗 -->
		<uni-popup ref="canlendarPop" borderRadius="30rpx 30rpx 30rpx 30rpx" backgroundColor="#ffffff"
			@change="chgPopup">
			<view class="boxSize_bb calendarPop flexDeCo" style="width: 80vw;">
				<view class="calendarTop flex_jcsb boxSize_bb"
					style="width: 80vw; padding-left: 30rpx;padding-right: 30rpx; margin-bottom: 20rpx;">
					<view class="ct_left ct_item flexDeCo" style="margin-left: 20rpx;">
						<view class="cti_top">入住</view>
						<!-- <view class="cti_bottom">{{startDate}} <text style="margin-left: 5rpx;">{{startWeekDay}}</text> -->
						<template v-if="startDate">
							<view class="cti_bottom"> {{startDate}} <text
									style="margin-left: 5rpx;">{{startWeekDay}}</text>
							</view>
						</template>
						<template v-else>
							<view style="font-size: 28rpx;color: darkgray;">请选择入住日期</view>
						</template>
						<!-- </view> -->
					</view>
					<view class="ct_right ct_item flexDeCo" style="margin-left: 20rpx;">
						<view class="cti_top">离店</view>
						<template v-if="endDate">
							<view class="cti_bottom"> {{endDate}} <text style="margin-left: 5rpx;">{{endWeekDay}}</text>
							</view>
						</template>
						<template v-else>
							<view style="font-size: 28rpx;color: darkgray;">请选择离店日期</view>
						</template>
					</view>
				</view>
				<uni-calendar :insert="true" :startDate="todayDate" :range='true' style="width: 70vw;" clearDate
					@change="calendarChange" />
				<view class="calendarSure button"
					style="margin: 40rpx auto 0 auto ;width: 70vw; height: 80rpx; border-radius: 40rpx;"
					@tap="closeCalendarPop">确定
				</view>
			</view>
		</uni-popup>
		<!-- 房型弹窗 -->
		<uni-popup ref="roomShapePop" borderRadius="30px 30px 30px 30px" backgroundColor="#ffffff" @change="chgPopup">
			<view class="roomShapePop boxSize_bb" style="width: 70vw;">
				<view class="roomShape" v-for="(item) in roomTypeList" :key="item.id">
					<view class="roomShape_text" style="margin-bottom: 10rpx;">{{ item.name }}</view>
					<view class="rromShape_favor boxSize_bb" style="padding-left: 30rpx;">
						<u-checkbox-group v-model="item.checkArr" placement="column">
							<u-checkbox v-for="(item1) in item.children" :key="item1.id"
								:customStyle="{marginBottom: '8px'}" :name="item1.id" :label="item1.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<!-- <view class="roomShape">
					<view class="roomShape_text" style="margin-bottom: 10rpx;">床型</view>
					<view class="rromShape_favor boxSize_bb" style="padding-left: 30rpx;">
						<up-checkbox-group v-model="selectedRoomShape" placement="column" @change="roomShapeChange">
							<up-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in roomShape"
								:key="index" :label="item.name" :name="item.name">
							</up-checkbox>
						</up-checkbox-group>
					</view>
				</view> -->
				<!-- <view class="roomShapePrefer" style="margin-top: 30rpx;">
					<view class="roomShape_text" style="margin-bottom: 10rpx;">偏好</view>
					<view class="rromShape_favor boxSize_bb" style="padding-left: 30rpx;">
						<up-checkbox-group v-model="preferSelected" placement="column" @change="roomShapeChange">
							<up-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in prefer"
								:key="index" :label="item.name" :name="item.name">
							</up-checkbox>
						</up-checkbox-group>
					</view>
				</view>
				<view class="roomShapeScenery" style="margin-top: 30rpx;">
					<view class="roomShape_text" style="margin-bottom: 10rpx;">景观</view>
					<view class="rromShape_favor boxSize_bb" style="padding-left: 30rpx;">
						<up-checkbox-group v-model="scenerySelected" placement="column" @change="roomShapeChange">
							<up-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in scenery"
								:key="index" :label="item.name" :name="item.name">
							</up-checkbox>
						</up-checkbox-group>
					</view>
				</view> -->
				<view class="roomShapeFilter button" style="margin-top: 40rpx; height: 60rpx; border-radius: 30rpx; "
					@tap="closeRoomShapePop">
					筛选
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import getWeekDay from '../../utils/weekDay';
	import getToday from '../../utils/getToday';
	import getNextDay from '../../utils/getNextDay';
	import spliceMMDD from '../../utils/stringSpliceMMDD';
	import RoomHead from './RoomHead.vue';
	import RoomData from './RoomData.vue';
	import {
		navigateTo,
		showToast
	} from '../../utils/promise';
	import {
		getRoomTree,
		getRoomType
	} from "../../api/room";
	import {
		hotelDetail
	} from "../../api/hotel";
	export default {
		data() {
			return {
				iscollect: false,
				showRoomNumber: false,
				startDate: getToday(),
				todayDate: getToday(),
				endDate: getNextDay(),
				startWeekDay: getWeekDay(getToday()),
				endWeekDay: getWeekDay(getNextDay()),
				startMMDD: spliceMMDD(getToday()),
				endMMDD: spliceMMDD(getNextDay()),
				mergeRoomShape: [],
				hotelInfo: {},
				hotelDetail: {},
				roomNumList: [{
						name: "房间数",
						num: 0,
					},
					{
						name: "成年人",
						num: 0,
					},
					{
						name: "未成年人",
						num: 0,
					},
				],
				roomList: [],
				roomTypeList: [],
				roomTotal: 0,

				roomCount: 0,
				personCount: 0,
				youngCount: 0,
			};
		},
		components: {
			RoomHead,
			RoomData
		},
		onLoad(options) {
			console.log('接收到的参数:', options);
			console.log('接收到的参数agentUserId:', options.agentUserId);
			if (options.agentUserId) {
				const agentUserId = options.agentUserId;
				console.log('推荐人ID:', agentUserId);

				// 存储到全局变量或本地存储
				// getApp().globalData.recommenderId = recommenderId;
				uni.setStorageSync('agentUserId', agentUserId);
				// 读取变量
				// uni.getStorageSync("agentUserId")
			}

			console.log(this.scenery)
			this.getRoomList();
			this.getRoomType()
			this.getHotelDetail()
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('获取位置成功')
				}
			})
		},
		computed: {
			totalNum() {
				return this.roomNumList[1].num + this.roomNumList[2].num
			}
		},
		methods: {
			isCollect() {
				this.iscollect = !this.iscollect;
				// console.log("collect")
				if (this.iscollect) {
					uni.showToast({
						title: '已收藏',
						icon: 'success',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '取消收藏',
						icon: 'none',
						duration: 2000
					});
				}
			},
			confirm(e) {
				console.log(e);
			},
			showCalendar() {
				this.$refs.canlendarPop.open('center');
			},
			calendarChange(e) {
				const {
					before,
					after
				} = e.range
				if (before < getToday()) {
					showToast({
						icon: "none",
						title: "入住日期不能小于今日，请重新选择!"
					})
					e.range.before = ''
					e.range.after = ''
					e.range.data = []
					this.startDate = ''
					this.endDate = ''
					this.startWeekDay = ''
					this.endWeekDay = ''
					this.startMMDD = ''
					this.endMMDD = ''
					return
				}
				if (before && after && before > after) {
					showToast({
						icon: "none",
						title: "离店日期不能大于入住日期，请重新选择!"
					})
					e.range.before = ''
					e.range.after = ''
					e.range.data = []
					this.startDate = ''
					this.endDate = ''
					this.startWeekDay = ''
					this.endWeekDay = ''
					this.startMMDD = ''
					this.endMMDD = ''
					// this.startWeekDay = getWeekDay(this.startDate);
					// this.endWeekDay = getWeekDay(this.endDate);
					// this.startMMDD = spliceMMDD(this.startDate);
					// this.endMMDD = spliceMMDD(this.endDate)
					// //修改后给list赋值，传参给预订页面
					// this.setOrderInfo()
					return
				}
				this.startDate = before;
				this.endDate = after;
				this.startWeekDay = this.startDate && getWeekDay(this.startDate);
				this.endWeekDay = this.endDate && getWeekDay(this.endDate);
				this.startMMDD = this.startDate && spliceMMDD(this.startDate);
				this.endMMDD = this.endDate && spliceMMDD(this.endDate)
				// console.log("getWeekDay('2025-04-09')", getWeekDay('2025-04-09'))
				// console.log(getWeekDay(this.startDate))	
				//修改后给list赋值，传参给预订页面
				this.setOrderInfo()
			},

			closeCalendarPop() {
				console.log("closeCalendarPop-----");
				if (!this.startDate) {
					showToast({
						icon: "none",
						title: "请选择入住日期!"
					})
					return
				}
				if (!this.endDate) {
					showToast({
						icon: "none",
						title: "请选择离店日期!"
					})
					return
				}
				if (this.startDate && this.endDate && this.startDate > this.endDate) {
					showToast({
						icon: "none",
						title: "离店日期不能大于入住日期，请重新选择!"
					})
					return
				}
				//修改后给list赋值，传参给预订页面wy20250423
				this.setOrderInfo()
				this.$refs.canlendarPop.close()
			},
			showRoomShapePop() {
				this.$refs.roomShapePop.open('center');
			},
			roomPopup() {
				this.$refs.roomNumPopup.open("center")
			},
			roomNumClose() {
				console.log(1)
				this.roomCount = this.roomNumList[0].num
				this.personCount = this.roomNumList[1].num
				this.youngCount = this.roomNumList[2].num
				//修改后给list赋值，传参给预订页面
				this.setOrderInfo()
				// this.showRoomNumber = false
				this.$refs.roomNumPopup.close()
			},
			chgPopup(e) {
				console.log(e)
			},
			closeRoomShapePop() {
				let params = {}
				params.current = 1
				params.size = 1000
				let ids = []
				this.roomTypeList.map(item => {
					ids = [...ids, ...item.checkArr]
				})
				ids = [...new Set(ids)]
				params.typeIds = ids.toString()
				this.getRoomList(params)
				this.$refs.roomShapePop.close();
			},
			goToHotelDetailsPage() {
				navigateTo({
					url: "/pages/HotelDetailsPage/HotelDetailsPage"
				})
			},
			onShare() {},
			getRoomList(params) {
				// let res = await home.getRoomList();
				// if (res.code === 200) {
				// 	res.data.forEach((e) => {
				// 		e.data.forEach((f) => {
				// 			f.originalPrice = new Big(f.originalPrice).div(100);
				// 			f.currentPrice = new Big(f.currentPrice).div(100);
				// 		});
				// 	});
				// 	res.data = res.data.filter((e) => e.data && e.data.length !== 0);
				// 	this.roomList = res.data;
				// }

				// this.roomList = [{"roomType":"豪华套间","roomPrice":"3886"},{"roomType":"豪华套间2","roomPrice":"3887"},{"roomType":"豪华套间3","roomPrice":"3888"}]
				getRoomTree(params).then((res) => {
					// console.log(res)
					const {
						data
					} = res
					this.roomList = data.records
					// console.log(this.roomList)
					this.roomTotal = this.roomList.length
					//修改后给list赋值，传参给预订页面
					this.setOrderInfo()
				}).catch((err) => {
					console.log(err)
				})
			},
			minusNum(index, item) {
        const { name, num } = item
        if (name === '未成年人') {
          if (num <= 0) return
          this.roomNumList[index].num--
          return
        }
				if (num <= 1) {
					return showToast({
						title: "数量至少为1"
					})
				}
				this.roomNumList[index].num--
			},
			addNum(index) {
				this.roomNumList[index].num++
			},
			getRoomType() {
				getRoomType().then((res) => {
					// console.log(res)
					const {
						data
					} = res
					this.roomTypeList = data.map(item => {
						return {
							...item,
							checkArr: []
						}
					})
				}).catch((err) => {
					console.log(err)
				})
			},
			setOrderInfo() {
				if (this.roomList.length > 0) {
					this.roomList.forEach((e) => {
						e.categoryId = e.id
						e.categoryName = e.name
						e.startWeekDay = this.startWeekDay
						e.endWeekDay = this.endWeekDay
						e.startDay = this.startDate
						e.endDay = this.endDate
						e.roomCount = this.roomCount
						e.personCount = this.personCount
						e.youngCount = this.youngCount
						e.orderType = e.name
						e.roomType = e.name
						e.roomPrice = e.price
						e.maxQty = e.maxPeopleQuantity
						let date1 = new Date(this.startDate);
						let date2 = new Date(this.endDate);
						let diffMilliseconds = date2 - date1; // 差值毫秒数
						let diffDays = diffMilliseconds / (1000 * 60 * 60 * 24); // 转换为天数
						e.minusNum = diffDays
						e.orderAmount = e.roomPrice * e.roomCount * e.minusNum;
						console.log("this.roomList.e--")
						console.log(e)
					})
				}
			},
			async getHotelDetail() {
				try {
					const res = await hotelDetail()
					const {
						data
					} = res
					this.hotelDetail = data
				} catch (err) {
					console.log(err)
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.hotel-room-list {
		width: 100vw;
		min-height: 100vh;
		background-color: rgb(247, 247, 247);
		font-family: 'PingFang SC';

		//房间列表弹窗
		::v-deep .u-calendar {
			position: relative !important;
		}

		//日历弹窗样式
		::v-deep .uni-calendar-item__weeks-box-item {
			width: 60rpx;
			height: 60rpx;
		}


		::v-deep .hotel-room-list {
			justify-content: center;
			align-items: center;
		}

		.calendarPop {
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: center;
			align-items: center;
			padding-top: 40rpx;
			padding-bottom: 40rpx;

			.calendarTop {
				.ct_item {
					justify-content: center;
					align-items: center;

					.cti_top {
						color: darkgray;
						font-size: 24rpx;
					}

					.cti_bottom {
						margin-top: 10rpx;
						font-size: 28rpx;
					}
				}
			}
		}

		//房型弹窗

		.roomShapePop {
			padding: 80rpx;
		}

		.roomAndPeople {
			width: 80vw;
			height: auto;
			padding-left: 40rpx;
			padding-right: 40rpx;
			// padding-bottom: 40rpx;

			.rp_item {
				margin-top: 40rpx;
				border-bottom: 0.5rpx solid #f5f5f5;
				box-sizing: border-box;
				padding-bottom: 40rpx;

				.rp_item_right {
					align-items: center;
				}


				.rpir_two {
					margin-left: 20rpx;

				}

				.rpir_three {
					margin-left: 20rpx;

				}
			}

			.button {
				margin-bottom: 40rpx;
			}
		}

		.hotel-room-list-one {
			width: 432rpx;
			height: 34rpx;
			margin: 20rpx auto 20rpx auto;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			letter-spacing: 0px;
			text-align: center;
			color: #979797;
		}
	}
</style>